<template>
	<view class="page-information-detail">
		<u-navbar :is-back="true" :border-bottom="false" height="46" title="" title-color="#333" title-size="36rpx"
		 :title-bold="true">
			<view class="navbar-right" slot="right" @click="onShareType(0)">
				<view class="message-box right-item">
					<u-icon name="zhuanfa" size="38" style="margin-right: 30rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="title">
			{{informationDetail.title}}
		</view>
		<view class="time-read">
			<span class="time">{{$u.timeFormat(informationDetail._createtime, 'yyyy年mm月dd日')}}</span>{{informationDetail.counts}}阅读
		</view>
		<!-- 富文本数据 -->
		<view class="content">
			<u-parse :html="richText"></u-parse>
		</view>
		<!-- <view class="content">
			但近年来，租房已经成了人们十分关心的话题，怎么租房才最安全？怎么才能租到最合适的房子都是人们十分关心的话题。在现如今房价十分不
		</view> -->
		<view class="img">
			<!-- <image :src="$baseUrl+informationDetail.img" mode="aspectFill" lazy-load></image> -->
		</view>
		<!-- <view class="content">
			但近年来，租房已经成了人们十分关心的话题，怎么租房才最安全？怎么才能租到最合适的房子都是人们十分关心的话题。在现如今房价十分不
		</view> -->

		<view class="scroll-li">
			<view class="scroll-list" v-for="(item,index) in hotSearchList" :key="item.id" @click="goHomeinfoDetail(item)">
				<view class="scroll-list-child">
					<view class="left-desc">
						<view class="desc">
							{{item.title}}
						</view>
						<view class="cate">
							<text class="cate-list cate-list-fc">{{item.tags}}</text>
							<text class="cate-list cate-list-fc">{{$u.timeFormat(item._createtime, 'yyyy年mm月dd日')}}</text>
						</view>
					</view>
					<view class="right-img">
						<image :src="$baseUrl+item.img" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="comment-warp">
			<view class="comment-total-num">
				共{{commentTotal}}条评论
			</view>
			<comment-data-list :commentList="commentList" @commentAll="commentAll" @reply="reply" @delReply="delReply" @close="close"
			 :commentShow="commentShow"></comment-data-list>
		</view>
		<view class="" style="color:#fff;">.</view>
		<comment @toggleMask="toggleMask('show')" @concern="concern" :detail="informationDetail"></comment>
		<!-- 发布评论 -->
		<ygcComment ref="ygcComment" :placeholder="'发布评论'" @pubComment="pubComment"></ygcComment>

		<u-toast ref="uToast" />
		<u-modal v-model="delModelShow" @confirm="confirm" @cancel="cancel" :show-confirm-button="true" :show-cancel-button="true"
		 :content="delModelContent"></u-modal>
	</view>
</template>

<script>
	import RichText from "@/common/richtext.js"
	import {
		commonGet
	} from "../../../api/commonapi.js"
	import secondComment from '@/components/common/second-comment.vue';
	import comment from '@/components/common/comment.vue';
	import ygcComment from '@/components/common/ygc-comment.vue';
	import commentDataList from '@/components/common/comment-data-list.vue'
	import ShareMerge from "@/common/ShareMerge.js"
	export default {
		mixins: [ShareMerge],
		components: {
			comment,
			secondComment,
			ygcComment,
			commentDataList
		},
		data() {
			return {
				commentShow: false,
				id: "",
				fromID: "", //一级评论id
				level: 1, //评论层级
				informationDetail: {},
				commentContent: "",
				$baseUrl: "",
				commentList: [],
				commentTotal: 0,
				secondCommentList: [],
				_creatememid: "", //当前登录人的_creatememid
				delModelShow: false,
				delModelContent: "确定删除吗？",
				hotSearchList: [],
				commentID: "", //删除时的评论id
				richText: "", //富文本数据
				
				shareUrl: "",
				shareTitle: "",
				shareContent: "",
				shareImg: "",
				spageid: "3307",
				creatememid:"",
				img:"",
			}
		},
		onLoad(options) {
			this.$baseUrl = this.baseUrl
			this.id = options.id
			this.getinformationDetail()
			this.getComment(options.id)
			if (this.$store.state.userIn) {
				this._creatememid = JSON.parse(this.$store.state.userIn).id
				this.creatememid = JSON.parse(this.$store.state.userIn).id
			}
			
		},
		methods: {
			toggleMask(type) {
				if (this.$store.state.token) {
					this.level = 1
					this.$refs.ygcComment.toggleMask(type);
				} else {
					this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}
			},
			toggleMask2(type) {
				if (this.$store.state.token) {
					this.level = 2
					this.$refs.ygcComment.toggleMask(type);
				} else {
					this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}
			},
			commentAll(fromID, secondCommentList) {
				this.level = 2
				this.fromID = fromID
				this.commentShow = true
				this.secondCommentList = secondCommentList
			},
			getinformationDetail() {
				let _this = this
				let query = {
					ak: _this.$store.state.token,
					cmd: "nNew_query_proc",
					para: JSON.stringify({
						id: _this.id
					})
				}
				commonGet(query, (result) => {
				
					_this.informationDetail = result.Data
					_this.hotSearchList = result.Data.Datas4
					_this.richText = RichText.formatRichText(_this.informationDetail.ncontent)
					
					_this.shareTitle=  result.Data.title
					_this.shareContent= result.Data.ndesc 
					_this.img=result.Data.img 
					_this.shareImg= _this.baseUrl+ result.Data.img 
				}) 
			},
			//添加评论和回复
			pubComment(commentContent1) {
				let _this = this
				if (uni.$u.trim(commentContent1)) {
					if (_this.level == 1) {
						var query = {
							ak: _this.$store.state.token,
							cmd: "sCommentM_add_proc",
							para: JSON.stringify({
								pageid: '3307',
								keyid: _this.id,
								title: _this.informationDetail.title,
								img: _this.informationDetail.img,
								comments: uni.$u.trim(commentContent1),
								_creatememid: _this.informationDetail._creatememid,
								_appid: _this.informationDetail._appid
							})
						}
					} else if (_this.level == 2) {
						var query = {
							ak: _this.$store.state.token,
							cmd: "sReply_add_proc",
							para: JSON.stringify({
								fromID: _this.fromID,
								comments: uni.$u.trim(commentContent1),
								_creatememid: _this.informationDetail._creatememid,
								_appid: _this.informationDetail._appid
							})
						}
					}
					commonGet(query, (result) => {
						if (result.Message == "操作成功！") {
							_this.$refs.ygcComment.toggleMask('');
							var nowDate = new Date().getTime()
							let obj = {
								logo: _this.$store.state.userIn.logo || "/img/no.png",
								nickname: _this.$store.state.userIn.nickname,
								comments: uni.$u.trim(commentContent1),
								_createtime: nowDate,
								_creatememid: _this._creatememid,
								children: []
							}
							if (_this.level == 1) {
								_this.getComment(_this.id)
							} else if (_this.level == 2) {
								_this.getComment(_this.id)
							}
							_this.commentTotal += 1
							_this.informationDetail.pjzs = _this.commentTotal
						}
					})
				} else {
					_this.$refs.uToast.show({
						title: "内容不能为空"
					})
				}
				_this.commentContent = commentContent1;
			},
			// 关注
			/**
			 * stype
			 * 0 收藏
			 * 1 点赞
			 * 2 关注
			 */
			concern(stype) {
				let _this = this
				if (_this.$store.state.token) {
					var cmd = ""
					var spageid = "3307"
					var skeyid = _this.id
					var _appid = ""
					if (_this.$store.state.userIn) {
						_appid = JSON.parse(_this.$store.state.userIn)._appid
					}
					switch (stype) {
						case 0:
							cmd = "mMemFav_add0_proc";
							break;
						case 1:
							cmd = "mMemFav_add1_proc";
							break;
						case 2:
							cmd = "mMemFav_add2_proc"
							spageid = "1010"
							skeyid = _this.informationDetail._creatememid;
							break;
					}
					var query = {
						ak: _this.$store.state.token,
						cmd: cmd,
						para: JSON.stringify({
							spageid: spageid,
							img: _this.informationDetail.img,
							skeyid: skeyid,
							title: _this.informationDetail.title,
							_creatememid: _this._creatememid,
							_appid: _appid,
							nickname: _this.informationDetail.nickname,
							logo: _this.informationDetail.logo
						})
					}
					commonGet(query, (result) => {
						if (result.Data.id == 1) {
							switch (stype) {
								case 0:
									_this.informationDetail.sfsc = ""
									_this.informationDetail.sccounts = Number(_this.informationDetail.sccounts) - 1
									_this.$refs.uToast.show({
										title: "已取消收藏"
									});
									break;
								case 1:
									_this.informationDetail.sfdz = ""
									_this.informationDetail.dzcounts = Number(_this.informationDetail.dzcounts) - 1
									_this.$refs.uToast.show({
										title: "已取消点赞"
									});
									break;
								case 2:
									_this.informationDetail.sfgz = ""
									_this.$refs.uToast.show({
										title: "已取消关注"
									});
									break;
							}
						} else {
							switch (stype) {
								case 0:
									_this.informationDetail.sfsc = "1"
									_this.informationDetail.sccounts = Number(_this.informationDetail.sccounts) + 1
									_this.$refs.uToast.show({
										title: "收藏成功"
									});
									break;
								case 1:
									_this.informationDetail.sfdz = "1"
									_this.informationDetail.dzcounts = Number(_this.informationDetail.dzcounts) + 1
									_this.$refs.uToast.show({
										title: "点赞成功"
									});
									break;
								case 2:
									_this.informationDetail.sfgz = "1"
									_this.$refs.uToast.show({
										title: "关注成功"
									});
									break;
							}
						}
					})
				} else {
					_this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}

			},
			// 获取评论数据
			getComment(aid) {
				let _this = this
				let query = {
					ak: _this.$store.state.token,
					cmd: "sCommentM_list_proc",
					para: JSON.stringify({
						"keyid": aid,
						pageid: "3307",
					})
				}
				commonGet(query, (result) => {
					result.Data.Data.forEach((item1, index1) => {
						item1.children = []
						result.Data.Datas1.filter((item2, index2) => {
							if (item1.id == item2.fromID) {
								item1.children.push(item2)
							}
						})
					})
					_this.commentList = result.Data.Data
					_this.commentTotal = result.Data.Data.length + result.Data.Datas1.length
				})
			},
			// 添加回复
			reply(fromID) {
				if (this.$store.state.token) {
					this.level = 2
					this.fromID = fromID
					this.$refs.ygcComment.toggleMask('show');
				} else {
					this.$refs.uToast.show({
						title: "请先登录",
						url: '/pages/myuser/user/UserInfo',
					})
				}

			},
			close() {
				this.commentShow = false
				this.level = 1
			},
			// 取消删除
			cancel() {
				this.delModelShow = false;
			},
			// 确定删除
			confirm() {
				let _this = this
				var _cmd = ""
				if (_this.level == 1) {
					_cmd = "sCommentM_delete_proc"
				} else if (_this.level == 2) {
					_cmd = "sReply_delete_proc"
				}
				var query = {
					ak: _this.$store.state.token,
					cmd: _cmd,
					para: JSON.stringify({
						id: _this.commentID,
						_creatememid: _this._creatememid
					})
				}
				commonGet(query, (result) => {
					if (result.Message == "操作成功！") {
						if (_this.level == 1) {
							_this.commentList.forEach((item, index) => {
								if (_this.commentID == item.id) {
									_this.commentList.splice(index, 1)
								}
							})
						} else {
							_this.secondCommentList.forEach((item, index) => {
								if (_this.commentID == item.id) {
									_this.secondCommentList.splice(index, 1)
								}
							})
						}
						_this.commentTotal -= 1
						_this.informationDetail.pjzs = _this.commentTotal
					}
				})
			},
			delReply(commentID) {
				this.delModelShow = true;
				this.commentID = commentID
			},
			goHomeinfoDetail(item) {
				uni.navigateTo({
					url: "/pages/index/homeInfo-detail/homeInfo-detail?id=" + item.id
				})
			}

		}
	}
</script>

<style lang="scss">
	.page-information-detail {
		background-color: #fbfbfb;
		overflow: hidden;
	}

	.title {
		font-size: 44rpx;
		font-weight: bold;
		padding: 40rpx 30rpx;
	}

	.time-read {
		font-size: 26rpx;
		padding: 0rpx 30rpx 104rpx 30rpx;
		color: #999999;

		.time {
			margin-right: 32rpx;
		}
	}

	.header {
		width: 100%;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.header-left {
			height: 64rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.picture {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.right-time {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.nick {
					font-size: 30rpx;
					font-weight: bold;
				}

				.time {
					font-size: 22rpx;
					color: #808080;
				}
			}
		}

		.no-guanzhu,
		.header-right {
			width: 100rpx;
			height: 50rpx;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

		.header-right {
			background-color: #c40200;
			color: white;
		}

		.no-guanzhu {
			color: white;
			background-color: #999;
		}
	}

	.preface {
		padding: 50rpx 30rpx;

		.preface-text::before {
			content: "";
			display: block;
			width: 10rpx;
			height: 38rpx;
			background-color: #c40200;
			border-radius: 20rpx;
		}

		.preface-text {
			width: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.preface-desc {
		margin: 0 30rpx;
		padding: 30rpx 30rpx 30rpx 0rpx;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;

		.preface-desc-left {
			font-family: "宋体";
			font-size: 72rpx;
		}
	}

	.content {
		padding: 0rpx 30rpx 50rpx 30rpx;
		font-size: 30rpx;
		line-height: 50rpx;

		.rich-text-content /deep/ p img {
			width: 100% !important;
		}
	}

	.img {
		image {
			width: 100%;
			height: 460rpx;
		}

	}

	.hot-search {
		margin: 0 30rpx;
		padding: 30rpx 24rpx;
		background-color: #fff;
		border-radius: 20rpx;

		.hot-search-tit {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 34rpx;
		}

		.li-warp {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(2, 50%);
			grid-column-gap: 10rpx;
			grid-row-gap: 10rpx;

			.li {
				background-color: #f5f5f5;
				border-radius: 8rpx;
				padding: 15rpx;
				font-size: 26rpx;
			}
		}
	}

	.scroll-li {
		margin: 16rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.scroll-list {
		padding: 26rpx 30rpx 0rpx 30rpx;

		.scroll-list-title {
			font-size: 32rpx;
			margin-bottom: 30rpx;
		}

		.img {
			height: 320rpx;
			display: flex;
			border-radius: 20rpx;
			overflow: hidden;

			.img-left,
			.img-right-2 {
				width: 450rpx;
				height: 320rpx;

				image {
					width: 450rpx;
					height: 320rpx;
				}
			}

			.img-left,
			.img-left-2 {
				margin-right: 8rpx;
			}

			.img-right,
			.img-left-2 {
				width: 230rpx;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.img-right-list {
					width: 230rpx;
					height: 156rpx;

					image {
						width: 230rpx;
						height: 158rpx;
					}
				}
			}
		}

		.img-1 {
			width: 100%;
			height: 320rpx;
			overflow: hidden;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 320rpx;
			}
		}

		.img-4 {
			width: 100%;
			height: 216rpx;
			border-radius: 20rpx;
			overflow: hidden;
			display: flex;
			justify-content: space-between;

			image {
				width: 340rpx;
				height: 216rpx;
			}
		}

		.cate {
			font-size: 22rpx;
			margin-top: 20rpx;

			.cate-list {
				display: inline-block;
				margin-right: 26rpx;
			}

			.cate-list-fc {
				color: #999999;
			}
		}

		.line {
			width: 100%;
			height: 1rpx;
			margin-top: 26rpx;
		}

		.scroll-list-child {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;

			.left-desc {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 142rpx;
				width: 100%;

				.desc {
					font-size: 32rpx;
					flex: 1;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					line-height: 50rpx;
				}
			}

			.right-img {
				margin-left: 20rpx;
				width: 318rpx;
				height: 142rpx;
				border-radius: 16rpx;
				overflow: hidden;
				border: 1rpx solid #dfdfdf;
				image {
					width: 224rpx;
					height: 142rpx;
				}
			}
		}

		.name-wrap {
			width: 266rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 32rpx;

			.logo {
				width: 72rpx;
				height: 72rpx;

				image {
					width: 72rpx;
					height: 72rpx;
				}
			}

			.name-wrap-right {
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.name {
					font-size: 28rpx;
				}

				.ass-name {
					font-size: 22rpx;
					color: #999;
				}
			}
		}

		.tap {
			height: 30rpx;
			width: 100%;
			display: flex;
			margin: 20rpx 0;
			align-items: center;

			.tap-list {
				flex: 1;
				text-align: center;
			}

			.tap-list:nth-child(2) {
				border-left: 1px solid #ebebeb;
				border-right: 1px solid #ebebeb;
			}
		}
	}

	.comment-warp {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 46rpx;
		.comment-total-num {
			font-size: 22rpx;
			color: #999;
			margin-bottom: 30rpx;
		}

		.first-comment-list {
			display: flex;
			margin-bottom: 58rpx;

			.first-comment-photo {
				margin-right: 14rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 100%;
				}
			}

			.first-comment-right {
				width: 100%;

				.first-head-right {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.first-comment-nickname {
						font-size: 22rpx;
						color: #999;
					}
				}

				.first-comment-centent {
					font-size: 26rpx;
				}

				.reply-time-warp {
					font-size: 22rpx;
					padding: 26rpx 0;

					.reply-time {
						display: inline-block;
						margin-right: 26rpx;
						color: #999;
					}
				}

				.second-comment-wrap {
					width: 100%;
					background-color: #f7f7f7;
					border-radius: 18rpx;
					padding: 20rpx;
					line-height: 40rpx;
					font-size: 26rpx;

					.second-comment-li {}

					.second-comment-num {
						color: #0146a3;
					}
				}
			}

		}
	}

	// .print-comment-wrap{
	// 	position: fixed;
	// 	z-index: 10;
	// 	bottom: 0;
	// 	width: 100%;
	// 	height: 64rxp;
	// 	background-color: #fff;
	// 	padding: 20rpx 30rpx;
	// 	border-top: 1px solid #ebebeb;
	// 	display: flex;
	// 	.print-comment-left{
	// 		height: 66rpx;
	// 		width: 468rpx;
	// 		background-color: #f5f5f5;
	// 		border-radius: 66rpx;
	// 		margin-right: 32rpx;
	// 		display: flex;
	// 		align-items: center;
	// 		.print-comment{
	// 			width: 160rpx;
	// 			height: 50rpx;
	// 		}
	// 	}
	// 	.print-comment-right{
	// 		width: 100%;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 	}
	// }
</style>
